<template>
	<div class="content">
		<van-pull-refresh v-model="loading" @refresh="onRefresh">
			<div v-for="item in chatList" :key="item.name">
				<van-cell clickable>
					<template #icon>
						<div class="van-icon" :style="{'background-color': getRandomHexColor()}"></div>
					</template>
					<template #title>
						<div class="van-ellipsis">{{item.name}}</div>
					</template>
					<template #label>
						<div class="van-ellipsis">{{item.msg}}</div>
					</template>
					<template #value>
						<div class="van-ellipsis">{{item.time}}</div>
					</template>
				</van-cell>
			</div>
		</van-pull-refresh>
	</div>
</template>
<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';
const loading = ref(false);
const chatList = ref([
	{
		name: '张三',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'1'
	},
	{
		name: '李四',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'2'
	},
	{
		name: '王五',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'3'
	},
	{
		name: '赵六',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'4'
	},
	{
		name: '钱七',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'5'
	},
	{
		name: '孙八',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'6'
	},
	{
		name: '周九',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'7'
	},
	{
		name: '吴十',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'8'	
	},
	{
		name: '郑十一',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'9'
	},
	{
		name: '王十二',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'10'
	},
	{
		name: '赵十三',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'11'
	},
	{
		name: '钱十四',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'12'
	},
	{
		name: '孙十五',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'13'
	},
	{
		name: '周十六',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'14'
	},
	{
		name: '吴十七',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'15'
	},
	{
		name: '郑十八',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'16'
	},
	{
		name: '王十九',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'17'
	},
	{
		name: '赵二十',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'18'
	},
	{
		name: '钱二十一',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'19'
	},
	{
		name: '孙二十二',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'20'
	},
	{
		name: '周二十三',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'21'
	},
	{
		name: '吴二十四',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'22'
	},
	{
		name: '郑二十五',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'23'
	},
	{
		name: '王二十六',
		msg: '你好啊',
		time: '2021-01-01 12:00:00',
		id:'24'
	}
]);
const onRefresh = () => {
	setTimeout(() => {
		showToast('刷新成功');
		loading.value = false;
	}, 1000);
};
const getRandomHexColor = ()=>{
	return '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
}
</script>
<style scoped>
.van-icon{
	width: 3em;
	height: 3em;
	border-radius: 1em;
	background-color: aqua;
	margin-right: 0.5em;
}
</style>